// 获取本地信息
let formName = localStorage.getItem('formName')
let categoryId = localStorage.getItem('categoryId')-0
let subCategoryId = localStorage.getItem('subCategoryId')-0
let subCategoryName = localStorage.getItem('subCategoryName')
let goodsName = localStorage.getItem('goodsName')
let goodsId = localStorage.getItem('goodsId')

// 显示优惠券
$('.coupon .clearfix div:nth-child(2)').click(function(){
    $('.not').toggle()
})

// 判断是否登录 - 如果没登录，回去登陆
let userId = localStorage.getItem('id')
if(!id){
    localStorage.setItem('url','./goods.html')
    location.href = './login.html'
}

// 判断显示空空如也
let arr = localStorage.getItem('data')
if(!arr) $('.carts').hide()
else $('.empty').hide()

// 字符串转换
arr = JSON.parse(arr)

// 发送Ajax请求 - 获取商品列表
$.ajax({
    url:'/item',
    data:{
        __timestamp: + new Date(),
        sortType: 0,
        descSorted: false,
        subCategoryId:subCategoryId,
        deliveryAreaId: 0,
        categoryId: categoryId
    },
    success: function (res){
        let itemList = res.data.itemList
        console.log(itemList)
        // 从所有商品数据里面选出存在本地的数据
        itemList = itemList.filter(item=>{
            for(let i = 0;i<arr.length;i++){
                if(arr[i].id == item.id){
                    return true
                }
            }
        })
        // 渲染数据
        // 渲染数据时，差一个数量 - 要找到对应商品的数量 
        let str = ''
        itemList.forEach(items => {
            let number = arr.find(v=>v.id == items.id).number
        str += `
        <div class="product clearfix">
            <div class="m1">
                <input type="checkbox" name="selectOne" id="checkbox" class="selectOne">
            </div>
            <div class="m2">
                <div class="image">
                    <img src="${items.scenePicUrl}" alt="">
                </div>
                <div class="name-size">
                    <p>${items.name}</p>
                    <p>库存不多啦！</p>
                </div>
            </div>
            <div class="m3">￥<span>${items.retailPrice}</span></div>
            <div class="m4">
                <span class="reduce">-</span>
                <input type="text" value="${number}" class="qwq">
                <span class="addd">+</span>
            </div>
            <div class="m5">￥${items.retailPrice}</div>
            <div class="m6">删除</div>
        </div>
        `
    });
        $('.middle').html(str)


        // 数量加减的功能
        addReduce()
        // 全选单选的功能
        selectAll()
        // 计算总价和总数量功能
        count()

    },
    error: function(){
        console.log('error')
    }
})

// 计算总价和总数量功能
function count(){
    // 计算总数量 - 被选中的复选框对应的数量累加
    var selectOne = $('.selectOne')
    // 遍历判读每个是否选中
    var totalNum = 0
    var totalPrice = 0
    for(var i=0;i<selectOne.length;i++){
        if(selectOne[i].checked){
            // 将这个对应的数量获取到
            totalNum += selectOne[i].parentElement.parentElement.children[4].children[2].value-0
            totalPrice += selectOne[i].parentElement.parentElement.children[3].children[1].innerText-0
        }
    }
    // 将总数量和总价格放到页面中
    $('.b4 p:nth-child(1) span:nth-child(2)').text('￥'+totalPrice)
    $('.b3 span:nth-child(2)').text('￥'+totalPrice)
    $('.cartNum').text(totalNum)
}

// 全选单选的功能
function selectAll(){
    // 点两个全选，所有的都应该选中
    var selectAll = document.querySelectorAll('.selectAll');
    var selectOne = document.querySelectorAll('.selectOne');
    for(var i=0;i<selectAll.length;i++){
        selectAll[i].onclick = function(){
            // 其他所有的单选根据当前点击的selectAll设置选中状态
            // 遍历selectOne都设置
            for(var j=0;j<selectOne.length;j++){
                selectOne[j].checked = this.checked
            }
            for(var j=0;j<selectAll.length;j++){
                selectAll[j].checked = this.checked
            }
            count()
        }
    }
    // 将selectOne转成数组 - every
    var arr = [].slice.call(selectOne)
    arr.forEach(item=>{
        item.onclick = function(){
            // 判断是否全部都选中
            var bool = arr.every(v=>v.checked)
            // 根据获取到bool设置两个全选
            for(var j=0;j<selectAll.length;j++){
                selectAll[j].checked = bool
            }

            count()
        }
    })
}

// 数量加减的功能
function addReduce(){
    // 获取所有的减按钮
    var reduceBtns = document.querySelectorAll('.reduce');
    // 循环遍历绑定事件
    for(var i=0;i<reduceBtns.length;i++){
        reduceBtns[i].onclick = function(){
            // 获取数量
            var number = this.parentElement.children[2].value;
            // 数量减
            number = number - 1
            // 限制最小值
            if(number<=1){
                number = 1
            }
            // 放到数量框中
            this.parentElement.children[2].value = number
            

            count()
        }
    }

    // 获取所有的加按钮
    var addBtns = document.querySelectorAll('.addd');
    // 循环遍历绑定事件
    for(var i=0;i<addBtns.length;i++){
        addBtns[i].onclick = function(){
            // 获取数量
            var number = this.parentElement.children[2].value;
            // 数量减
            number = number-0 + 1
            // 放到数量框中
            this.parentElement.children[2].value = number
            
            count()
        }
    }
}